import { style, globalStyle } from '@vanilla-extract/css';
import SVGUser from '@mdi/svg/svg/account-outline.svg';
import SVGOrgan from '@mdi/svg/svg/home-outline.svg';
import SVGArrowDown from '@mdi/svg/svg/chevron-down.svg';
import SVGCalendarMonth from '@mdi/svg/svg/calendar-month-outline.svg';
import SVGCalendarYear from '@mdi/svg/svg/calendar-blank-outline.svg';
import { vars } from '../../components/global.css';

function getIcon(icon: string) {
	const b64 = btoa(icon.replaceAll(/<path d/g, '<path style="fill:#888" d'));
	return `url(data:image/svg+xml;base64,${b64})`;
}

const ICON_SIZE = '2em';
const ICON_PAD = '0.4em';
const CELL_PADDING = '0.4em';

export const cellTagStyle = style({});

globalStyle(`${cellTagStyle}>div`, {
	backgroundColor: 'transparent !important',
	border: '1px solid #8885 !important',
});

export const inlineStyle = style({
	display: 'inline-block',
	height: '1em',
	lineHeight: '1em',
	minWidth: '3em',
	position: 'relative',
	outline: 'none',
	textAlign: 'center',
	paddingRight: ICON_SIZE,
	borderBottom: '1px solid black',
	selectors: {
		'&:after': {
			content: ' ',
			display: 'block',
			paddingRight: ICON_PAD,
			position: 'absolute',
			right: 0,
			top: 0,
			bottom: 0,
			width: `calc(${ICON_SIZE} - ${ICON_PAD})`,
			boxSizing: 'border-box',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat',
			backgroundOrigin: 'content-box',
			backgroundSize: 'auto',
		},
		'&.tag': {
			paddingRight: CELL_PADDING,
		},
		'&.text,&.number': {
			paddingRight: CELL_PADDING,
		},
		'&.checkbox': {
			paddingRight: CELL_PADDING,
			textAlign: 'center',
		},
		'&.select': {
			cursor: 'default',
		},
		'&.select:focus': {
			borderBottom: '1px solid #f80',
		},
		'&.text:after': {
			display: 'none',
		},
		'&.number:before': {
			content: 'attr(prefix)',
			paddingRight: '0.2em',
		},
		'&.number:after': {
			content: 'attr(suffix)',
			display: 'inline',
			position: 'static',
			paddingRight: 0,
			paddingLeft: '0.2em',
		},
		'&.user:after': {
			backgroundImage: getIcon(SVGUser),
		},
		'&.organ:after': {
			backgroundImage: getIcon(SVGOrgan),
		},
		'&.select:after': {
			backgroundImage: getIcon(SVGArrowDown),
		},
		'&.year:after': {
			backgroundImage: getIcon(SVGCalendarYear),
		},
		'&.month:after': {
			backgroundImage: getIcon(SVGCalendarMonth),
		},
		'&.date:after': {
			backgroundImage: getIcon(SVGCalendarMonth),
		},
	},
	'@media': {
		print: {
			paddingRight: `${CELL_PADDING} !important`,
			selectors: {
				'&:after': {
					display: 'none !important',
				},
				'&.number:after': {
					display: 'inline !important',
					content: 'attr(suffix)',
					position: 'static',
				},
			},
		},
	},
});

export const cellStyle = style({
	position: 'relative',
	outline: 'none',
	textAlign: 'center',
	verticalAlign: 'middle',
	wordBreak: 'break-all',
	padding: CELL_PADDING,
	paddingRight: ICON_SIZE,
	// selectors: {
	// 	'&:before': {
	// 		content: '请输入',
	// 		color: '#ccc',
	// 	},
	// },
	selectors: {
		'&:after': {
			content: ' ',
			display: 'block',
			paddingRight: ICON_PAD,
			position: 'absolute',
			right: 0,
			top: 0,
			bottom: 0,
			width: `calc(${ICON_SIZE} - ${ICON_PAD})`,
			boxSizing: 'border-box',
			backgroundPosition: 'center',
			backgroundRepeat: 'no-repeat',
			backgroundOrigin: 'content-box',
			backgroundSize: 'auto',
		},
		'&.tag': {
			paddingRight: CELL_PADDING,
		},
		'&.text,&.number': {
			paddingRight: CELL_PADDING,
		},
		'&.checkbox': {
			paddingRight: CELL_PADDING,
			textAlign: 'center',
		},
		'&.select': {
			cursor: 'default',
		},
		'&.select:focus': {
			outline: '2px solid #f80',
			outlineOffset: '-4px',
		},
		'&.text:after': {
			display: 'none',
		},
		'&.number:before': {
			content: 'attr(prefix)',
			paddingRight: '0.2em',
		},
		'&.number:after': {
			content: 'attr(suffix)',
			display: 'inline',
			position: 'static',
			paddingRight: 0,
			paddingLeft: '0.2em',
		},
		'&.user:after': {
			backgroundImage: getIcon(SVGUser),
		},
		'&.organ:after': {
			backgroundImage: getIcon(SVGOrgan),
		},
		'&.select:after': {
			backgroundImage: getIcon(SVGArrowDown),
		},
		'&.year:after': {
			backgroundImage: getIcon(SVGCalendarYear),
		},
		'&.month:after': {
			backgroundImage: getIcon(SVGCalendarMonth),
		},
		'&.date:after': {
			backgroundImage: getIcon(SVGCalendarMonth),
		},
	},
	'@media': {
		print: {
			paddingRight: `${CELL_PADDING} !important`,
			selectors: {
				'&:after': {
					content: '',
					display: 'none !important',
				},
				'&.number:after': {
					display: 'inline !important',
					content: 'attr(suffix)',
				},
			},
		},
	},
});

export const checkboxStyle = style({
	fontSize: '1em',
});
globalStyle(`button.${checkboxStyle}>svg,button.${checkboxStyle}[checked=true]>svg`, {
	fill: vars.color.regularText,
	width: '1.2em',
	height: '1.2em',
});
